<template>
  <div style="margin: 10px;height: 100vh"      v-loading="spinning">
    <JzTable v-model:jzTableData="jzTableData"
             @refreshClick="refreshClick"

    >
      <template v-slot:tableColumn>

        <template v-for="item in jzTableData.jzTable.zjColumnList">
          <template v-if="item.show">
            <el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable?'custom':false"  :show-overflow-tooltip="true"  :width="item.width" />
          </template>
        </template>

        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <el-button
                size="small"
                v-if="scope.row.userName!='admin'"
                link type="success"
                @click=" configShow(scope.row)"
                style="margin-right: 2px"
                :icon="Edit"
            >修改
            </el-button>
          </template>
        </el-table-column>
      </template>

    </JzTable>


    <el-dialog v-model="updateOpen" title="修改参数" width="800" style="z-index: 999">
      <el-form  label-width="auto" style="max-width: 800px"
               ref="rpdateRef"
               :rules="roleSaveOrUpdateRules"
      >

        <el-form-item label="参数名" prop="configName">
          <el-input v-model="configData.configName" disabled/>
        </el-form-item>
        <el-form-item label="参数键" prop="configKey">
          <el-input v-model="configData.configKey" disabled/>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="configData.remarks" disabled/>
        </el-form-item>

        <el-form-item label="参数值" prop="configValue">
          <el-input v-model="configData.configValue" clearable/>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="update(rpdateRef)" :loading="spinning">修改</el-button>
          <el-button @click="updateOpen = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import JzTable from "@/components/jiaoZi/table/JzTable.vue";
import {jzTableData} from "@/components/jiaoZi/table/JzTable";
import {Delete, Edit, Open, TurnOff} from "@element-plus/icons-vue";
import request from "@/api/request";
import {ElMessage, type FormInstance, type FormRules} from "element-plus";
import {type RoleSaveOrUpdateParam, roleSaveOrUpdateParam} from "@/views/sys/role/RoleInfo";

const rpdateRef = ref<FormInstance>()

let spinning = ref<boolean>(false);
let updateOpen = ref<boolean>(false);
let configData=ref({});

function configShow(obj){
  configData.value= {};
  configData=ref(obj)
  updateOpen.value=true;
}

const roleSaveOrUpdateRules = reactive<FormRules<RoleSaveOrUpdateParam>>({
  configValue: [
    {required: true, message: '请填写参数值', trigger: 'blur'}
  ]
});

const update = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      spinning.value = true;
      request.put('/sysConfigs/updateConfigValue/' + configData.value.id, {configValue:configData.value.configValue}).then((res: any) => {

        if (res.code == '10000') {
          ElMessage.success("修改成功");
          updateOpen.value = false;
          getPage();
        } else {
          ElMessage.error(res.errorMessage);
          spinning.value = false;
        }
      }).catch((error) => {
        console.log( error)
        spinning.value = false;
      })

    } else {
      console.log('error submit!', fields)
    }
  })

}

onMounted(() => {
  //初始化
  getInfo();
  //加载默认数据
  getPage();

})

function getInfo(){
  request.get('/sysConfigs/info' ).then((res: any) => {
    if (res.code == '10000') {
      jzTableData.value.jzTable=res.data;
      let columnAll=jzTableData.value.jzTable.zjColumnList;
      jzTableData.value.jzTable.zjColumnList =columnAll.filter((tab) => tab.show == true)
    } else {
      ElMessage.error(res.errorMessage);
    }
  }).catch((error) => {
    console.log(error)
  })
}



function refreshClick() {
  getPage()
}
function getPage() {
  spinning.value = true;
  request.get('/sysConfigs/configList'  ).then((res: any) => {
    spinning.value = false;
    if (res.code == '10000') {
      jzTableData.value.jzPageData.records = res.data;
    } else {
      ElMessage.error(res.errorMessage);
    }
  }).catch((error) => {
    spinning.value = false;
    console.log(error)
  })
}


</script>

<style scoped>

</style>